Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.
In this article, we’ll look at how to use it in our Vue apps.
Pagination
We can add pagination buttons with the a-pagination component.
For example, we can write:
<template>
<div>
<a-pagination v-model="current" :total="50" show-less-items/>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
current: 2
};
}
};
</script>
We have the a-pagination component with the v-model directive to bind the current page clicked to a reactive property.
total is the total number of pages.
show-less-items makes the button bar display fewer buttons.
We can listen to the showSizeChange event that is emitted when page size changes:
<template>
<div>
<a-pagination
show-size-changer
:default-current="3"
:total="500"
@showSizeChange="onShowSizeChange"
/>
</div>
</template>
<script>
export default {
name: "App",
methods: {
onShowSizeChange(current, pageSize) {
console.log(current, pageSize);
}
}
};
</script>
current has the current page. pageSize has the page size.
Also, we can make the pagination buttons smaller with the size prop:
<template>
<div>
<a-pagination size="small" :total="50"/>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
And we can enable simple mode with the simple prop:
<template>
<div>
<a-pagination simple :default-current="2" :total="50"/>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We can listen to the change event to watch for page changes:
<template>
<div>
<a-pagination :current="current" :total="50" @change="onChange"/>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
current: 3
};
},
methods: {
onChange(current) {
this.current = current;
}
}
};
</script>
The current parameter has the current page clicked.
The show-total prop lets us show the total by setting the prop to a function:
<template>
<div>
<a-pagination
:total="100"
:show-total="total => `Total ${total} items`"
:page-size="20"
:default-current="1"
/>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Steps
We can add a component to show steps with the a-steps component:
<template>
<div>
<a-steps :current="1">
<a-step>
<template slot="title">Finished</template>
<span slot="description">This is a description.</span>
</a-step>
<a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description."/>
<a-step title="Waiting" description="This is a description."/>
</a-steps>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
The current prop sets the index of current step.
sub-title has the subtitle.
We can make it smaller with the with the size prop:
<template>
<div>
<a-steps :current="1" size="small">
<a-step title="Finished"/>
<a-step title="In Progress"/>
<a-step title="Waiting"/>
</a-steps>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Also, we can add the steps with icons:
<template>
<div>
<a-steps :current="1">
<a-step status="finish" title="Login">
<a-icon slot="icon" type="user"/>
</a-step>
<a-step status="finish" title="Verification">
<a-icon slot="icon" type="solution"/>
</a-step>
<a-step status="process" title="Pay">
<a-icon slot="icon" type="loading"/>
</a-step>
</a-steps>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We can control the steps with the current prop:
<template>
<div>
<a-steps :current="current">
<a-step v-for="item in steps" :key="item.title" :title="item.title"/>
</a-steps>
<div class="steps-content">{{ steps[current].content }}</div>
<div class="steps-action">
<a-button v-if="current < steps.length - 1" type="primary" [@click](http://twitter.com/click "Twitter profile for @click")="next">Next</a-button>
<a-button
v-if="current == steps.length - 1"
type="primary"
[@click](http://twitter.com/click "Twitter profile for @click")="$message.success('Processing complete!')"
>Done</a-button>
<a-button v-if="current > 0" style="margin-left: 8px" [@click](http://twitter.com/click "Twitter profile for @click")="prev">Previous</a-button>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
current: 0,
steps: [
{
title: "First",
content: "First-content"
},
{
title: "Second",
content: "Second-content"
},
{
title: "Last",
content: "Last-content"
}
]
};
},
methods: {
next() {
this.current++;
},
prev() {
this.current--;
}
}
};
</script>
The button changes the current reactive property to move through the steps.
Conclusion
We can add steps display and pagination buttons to our Vue app with Ant Design Vue.
